<template>
	<view class="lm-space-between" :style="{ backgroundColor: bacColor }" @click="change">
		<view class="lm-space-between-left" :class="{ act: required }">{{ lable }}</view>
		<view class="lm-space-between-right">
			<view class="inputView" v-if="disabled">
				<view v-if="value" class="u-line-1">{{ value }}</view>
				<view v-else class="u-line-1">{{ placeholder }}</view>
			</view>
			<input v-else :type="type" :value="value" :placeholder="placeholder" @input="changeInput" />
			<template v-if="$slots.right">
				<slot name="right"></slot>
			</template>
			<u-icon name="arrow-right" v-if="disabled && showIcon && !$slots.right" size="14"></u-icon>
			<!-- <uni-icons v-if="disabled && showIcon && !$slots.right" type="right" size="18"></uni-icons> -->
		</view>
	</view>
</template>

<script>
	/**
	 * lm-input
	 * @tutorial https://uniapp.dcloud.net.cn/component/input.html#input
	 * @property {String} type input类型默认text 可选 number|idcard|digit|tel|safe-password|nickname
	 * @property {String} lable 左侧文字
	 * @property {String} placeholder 输入框为空时占位符
	 * @property {String} showIcon 是否显示右侧箭头 默认false
	 * @property {String} required 是否必填 默认false
	 * @property {String} disabled 是否只读 默认false
	 * @property {String} bacColor 背景色 默认#FFFFFF
	 */
	export default {
		name: 'lm-input',
		props: {
			value: {
				type: String,
				default: '',
			},
			type:{
				type:String,
				default:'text'
			},
			lable: {
				type: String,
				default: '',
			},
			placeholder: {
				type: String,
				default: '',
			},
			// 是否显示右侧箭头
			showIcon: {
				type: Boolean,
				default: false,
			},
			// 是否必填
			required: {
				type: Boolean,
				default: false,
			},
			// 是否只读
			disabled: {
				type: Boolean,
				default: false,
			},
			// 背景色
			bacColor: {
				type: String,
				default: '#FFFFFF',
			},
		},
		data() {
			return {};
		},
		methods: {
			change() {
				if (this.disabled == false) return;
				this.$emit('onChange');
			},
			changeInput(event) {
				this.$emit('input', event.target?.value)
				// #ifdef VUE3
				this.$emit('update:modelValue', event.detail.value)
				// #endif
			},
		},
		options: {
			styleIsolation: 'shared',
		},
	};
</script>

<style lang="scss">
	.inputs {
		margin-bottom: 32rpx;

		.lable {
			font-size: 32rpx;
			font-family:
				PingFang SC-Regular,
				PingFang SC;
			font-weight: 400;
			color: #060220;
			margin-bottom: 20rpx;
		}
		.icon-img {
			width: 40rpx;
			height: 40rpx;
		}
		.code {
			color: #009a29;
		}
		/* #ifdef VUE3 */
		:deep(.uni-easyinput__content) {
			padding: 10rpx 28rpx;
			border-radius: 15rpx;
		}
		/* #endif */
		
		/* #ifndef VUE3 */
		/deep/.uni-easyinput__content {
			padding: 10rpx 28rpx;
			border-radius: 15rpx;
		}
		/* #endif */
		
	}

	.lm-space-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 92rpx;
		line-height: 92rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 12rpx;
		margin-bottom: 32rpx;
		padding: 26rpx 32rpx;
		box-sizing: border-box;

		&-left {
			font-size: 28rpx;
			font-family:
				PingFang SC-Regular,
				PingFang SC;
			font-weight: 600;
			color: #1d2129;
			margin-right: 10px;

			&.act {
				&::before {
					content: '*';
					color: #f53f3f;
				}
			}
		}

		&-right {
			display: flex;
			align-items: center;
			flex: 1;

			input {
				flex: 1;
				font-size: 28rpx;
				font-family:
					PingFang SC-Regular,
					PingFang SC;
				font-weight: 400;
				text-align: right;
			}

			.inputView {
				flex: 1;

				view {
					font-size: 28rpx;
					font-family:
						PingFang SC-Regular,
						PingFang SC;
					font-weight: 400;
					text-align: right;
				}
			}

			/* #ifdef VUE3 */
			:deep(.u-icon) {
				margin-left: 15rpx;
			}
			/* #endif */
			
			/* #ifndef VUE3 */
			/deep/.u-icon {
				margin-left: 15rpx;
			}
			/* #endif */
		}
	}
</style>